<template>
	<view class="couponCard">
		<!-- 页面内容开始 -->
		<view class="li" v-if="mode == 1">
			<view class="cone">
				<view class="d1">
					<view>
						<text v-if="Discount" class="span">{{Discount}}</text>
						<!-- <text v-else="!Discount" class="span">{{price|priceFilter2}}</text> -->
						<!-- 过滤器的逻辑暂时先注释掉,暂时没有对应的数据库字段 -->
						
						<text class="span">{{priceType}}</text>
						<view style="margin-top: 16rpx;" class="tips">{{tips}}</view>
					</view>
					<view>
						<view class="p" style="min-width: 260rpx;" >{{name}}</view>
						<view class="p" style="color: #CCCCCC;" >{{restrictionsUse}}</view>
					</view>
					<u-checkbox v-if="showCheckbox"  class="checkStyle" active-color="#2f2e33" shape="circle" :value="check"></u-checkbox>
				</view>
				<view class="d3">
					<view  class="p footer">{{footerMsgdesc}}{{footerMsg}}</view>
				</view>
			</view>
		</view>
		
		<view class="li" v-if="mode == 2">
			<view class="cone">
				<view class="d1" style="background-color: #C0C0C0;"  >
					<view style="color: white;">
						<text v-if="Discount" class="span">{{(Discount)}}</text>
						<text v-else="!Discount" class="span">{{price|priceFilter2}}</text>
						<text class="span">{{priceType}}</text>
						<view style="margin-top: 12rpx;" class="tips">{{tips}}</view>
					</view>
					<view style="font-size: 60rpx; font-weight: bold;color: white; margin-left: 170rpx; margin-right: 100rpx; font-family: kaiti;line-height: 110rpx; ">
						{{disabledMsg}}
					</view>
				</view>
				<view class="d3"  style="background-color: #ccc;">
					<view  class="p footer">{{footerMsgdesc}} {{footerMsg}}</view>
				</view>
			</view>
		</view>
		<!-- 页面内容结束 -->
	</view>
</template>

<script>
	export default {
		name: 'couponCard',
		props: {
			// 可通过模式来动态切换,模式1为可用切正常渲染,模式2则统一显示不可用
			mode:{
				Type:Number,
				default:1
			},
			// 最左边显示折扣的价格
			price:{
				Type:Number,
				default:0
			},
			// 显示价格的类型,默认是元,可以手动自己定义
			priceType:{
				Type:String,
				default:"元"
			},
			// 左上方显示内容部分 可以是钱,也可以是具体折扣,用户自己定义
			Discount:{
				Type:[String,Number],
				default:"无"
			},
			// 小型提示
			tips:{
				Type:String,
				default:""
			},
			// 对优惠券的说明,如果家电用器立减10元等
			name:{
				Type:String,
				default:""
			},
			// 给日期旁边添加描述，使用起来更加的灵活
			footerMsgdesc:{
				Type:String,
				default:"有效期至："
			},
			// 底部有效期时间
			footerMsg:{
				Type:String,
				default:""
			},
			restrictionsUse:{
				Type:String,
				default:""
			},
			// 不可用的数据可以自定义
			disabledMsg:{
				Type:String,
				default:"不可用"
			},
			// 是否显示单选框
			showCheckbox:{
				Type:Boolean,
				default:true
			},
			// 强制控制某个选项被勾选,用于业务情景是必定使用某个优惠券
			check:{
				Type:Boolean,
				default:false
			},
		},
		data() {
			return {
				
			};
		},
		created(){
			this.init();
		},
		mounted() {
			
		},
		methods: {
			// 页面数据初始化函数
			init(options = {}){
				
			},
			pageTo(path){
				
			},
		},
		// 过滤器
		filters:{
			priceFilter2:function(n){
				// return parseFloat(vk.pubfn.priceFilter(n));
				// 这个地方是对价格的对应处理
			}
		},
		// 计算属性
		computed:{
			
		}
	};
</script>

<style lang="scss" scoped>
	// 优惠券的对应样式~
	.couponCard {
		width: 100%;
		transition: all 400ms ease;
		box-sizing: border-box;
		background: #F8F8F8;
		z-index: 12;
		bottom: 0;
		& .tips{
			font-size: 12px;
			line-height: 14px;
		}
		& .checkStyle{
			margin-left: 130rpx;
		}
		& .p.tt {
			line-height: 80rpx;
			color: #333;
			font-size: 24rpx;
			text-align: center;
			padding: 0 30rpx;
		}
	
		& .a {
			font-size: 40rpx;
			color: #999999;
			float: right;
			line-height: 80rpx;
		}
		& .li {
			margin-bottom: 20rpx;

			& .cone {
				width: 100%;

			 & view.d1 {
					padding: 24rpx 0 20rpx 0rpx;
					display: flex;
					align-items: center;
					background-color: white;
					border-bottom: 1px dashed #f0f1f3;
					box-shadow: 0 0 4px rgba(0,0,0,.1);
					border-radius: 20rpx;
					& view:nth-child(1) {
						width: 230rpx;
						color: red;
						text-align: center;
						line-height: 40rpx;
						 & .span:nth-child(1) {
							font-size: 48rpx;
							font-weight: bold;
							margin-right: 10rpx;
							
						}

						 & .span:nth-child(2) {
							font-size: 12px;
						}
					}

					& view:nth-child(2) {
						padding: 10rpx 0 0 0rpx;
						& .p {
							color: black;
							font-size: 12px;
							line-height: 36rpx;
							text-align: left;
						}

						& .p:nth-child(1) {
							
							font-weight: bold;
							font-size: 28rpx;
						}
					}
				}
				& view.d3 {
					background: #fff;
					padding: 0 30rpx;
					box-shadow: 0 0 4px rgba(0,0,0,.1);
					& .p {
						color: #999999;
						font-size: 20rpx;
						line-height: 60rpx;
					}
					& .p.footer {
						padding: 10rpx;
						line-height: 36rpx;
					}
				}

				& view.d3::before,
				& view.d3::after {
					// 这里及以下是圆弧展示
					content: "";
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					border-radius: 100%;
					background: #F8F8F8;
				}

				& view.d3::before {
					left: 15rpx;
					margin-top: -20rpx;
				}

				& view.d3::after {
					right: 15rpx;
					margin-top: -80rpx;
				}
			}
		}
	}
	

</style>
